﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JSCP Example 2 - Employee Listing</title>
    <link rel="Stylesheet" type="text/css" href="../JSClientPages.css" />    
    <link rel="Stylesheet" type="text/css" href="Stylesheet.css" />

    <script type="text/javascript" src="../JSClientPages.js"></script>
    <script type="text/javascript" src="../JSClientPage.ashx?page2=Examples/Example2.xml"></script>

    <script type="text/javascript">
        employees = [];
        averageSalary = 0.0;


        function addEmployee() {
            var salary = document.getElementById('input-salary').value;

            if (!salary.match(/^[1-9][0-9]*$/)) {
                alert('The salary should be numeric (no decimals)');
            } else {
                salary = parseInt(salary);
                averageSalary = (averageSalary * employees.length + salary) / (employees.length + 1);
                employees.push(
                    {
                        firstName: document.getElementById('input-first-name').value,
                        lastName: document.getElementById('input-last-name').value,
                        position: document.getElementById('input-position').value,
                        'salary': salary
                    }
                );
                var parameters = {
                    'employees': employees,
                    'averageSalary': averageSalary
                };
                JSClientPage.refresh(
                    'employee-listing',
                    'employee-listing',
                    parameters
                );
            }
        }
        function formatCurrency(value) {
            return '$' + parseFloat(value).toFixed(2);
        }
    </script>

</head>
<body>
    <div class="content">
        <div class="header">
            <span class="technology">JavaScript Client Pages</span>
            <span class="title">Programming Examples</span>
        </div>
    
        <div class="main">
            <h1>Programming Examples</h1>
            <h2>Example 2: Employee Listing</h2>
            <p>
                This example illustrates JSCP's XML-based rendering capabilities
            </p>
            <form id="employee-form" action="">
            <table class="form">
                <tbody>
                    <tr>
                        <td>
                            First Name
                        </td>
                        <td>
                            <input id="input-first-name" type="text" name="first_name" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Last Name
                        </td>
                        <td>
                            <input id="input-last-name" type="text" name="last_name" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Position
                        </td>
                        <td>
                            <select id="input-position" name="position">
                                <option value="Programmer">Programmer</option>
                                <option value="Manager">Manager</option>
                                <option value="Executive">Executive</option>
                                <option value="Accountant">Ancountant</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Salary
                        </td>
                        <td>
                            <input id="input-salary" type="text" name="salary" />
                        </td>
                    </tr>
                </tbody>
            </table>
            </form>
            <button onclick="addEmployee(); return false;">
                Add
            </button>
            <div id="employee-listing">
            </div>
        </div>
    </div>
</body>
</html>
